<template>
  <ul class="menu" @click="convert" :class="{ cancel: flag }">
    <li class="t"></li>
    <li class="m"></li>
    <li class="b"></li>
  </ul>
</template>

<script>
// 此行导入其他文件（如组件，工具js，第三方插件js，json文件，图片文件等）
export default {
  name: "Hamburger",
  data() {
    return {
      flag: false,
    };
  },
  computed: {},
  watch: {},
  // 创建完成（可以访问当前this实例）
  created() {},
  // 挂载完成（可以访问DOM元素）
  mounted() {},
  methods: {
    convert() {
      this.flag = !this.flag;
      this.$emit("menuClicked", this.flag);
    },
  },
};
</script>

<style scoped>
/* @import url(); 引入公共css类 */

.menu {
  width: 0.52rem;
  height: 0.27rem;
  position: relative;
  transition: all 0.5s;
}
.menu li {
  width: 0.52rem;
  height: 0.03rem;
  background-color: #fff;
  position: absolute;
  transition: all 0.5s;
}
.menu .t {
  top: 0;
}
.menu .m {
  top: 0.12rem;
}
.menu .b {
  bottom: 0;
}
.menu.cancel .t {
  transform: rotate(90deg);
}
.menu.cancel .m {
  transform: scaleX(0) translateY(-0.1rem);
}
.menu.cancel .b {
  transform: translateY(0.04rem);
}
.menu.cancel {
  transform: rotate(225deg);
}
</style>
